import React, { Component } from 'react';
import { View, StyleSheet, TextInput, Image, Text } from 'react-native';
import { Colors } from '../../style';
import PropTypes from 'prop-types';

var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;

class EditText extends Component {

    static propTypes = {
        error: PropTypes.bool.isRequired,
        errorText: PropTypes.string.isRequired,
        width: PropTypes.number.isRequired,
        onChange: PropTypes.func.isRequired
    }

    render() {
        let { error, errorText, image, width, onChange } = this.props;
        return (
            <View>
                {error && <Text style={styles.error}>{errorText}</Text>}
                <View style={[styles.textinput,]}>
                    {image && <View style={styles.icon} />}
                    <TextInput style={[styles.subTextInpput, { width: width, }]}
                        clearButtonMode={'always'}
                        onChangeText={(text) => {
                            onChange && onChange(text.trim())
                        }}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textinput: {
        borderColor: Colors.black,
        borderRadius: 5,
        borderWidth: 1.0,
        flexDirection: 'row',
        alignItems: 'center',
        padding:3
    },
    subTextInpput: {
        width: screenWidth,
        padding: 0
    },
    icon: {
        width: 30,
        height: 30,
        backgroundColor: '#000',
        margin: 5
    },
    error: {
        fontSize: 15,
        color: 'red',
        margin: 1
    }
})

export default EditText;